<template>
  <view class="video-container">
    <video
      v-if="!preview"
      :id="videoId"
      class="dplayer-video dplayer-video-current"
      webkit-playsinline=""
      x-webkit-airplay="allow"
      playsinline=""
      :poster="poster + '?x-oss-process=image/resize,w_700'"
      preload="auto"
      :src="src"
      :ref="`videoRef${videoId}`"
      @play="videoPlay"
      @loadedmetadata="loadedmetadata"
    ></video>

    <cover-view v-show="!loaded" class="waiting-view">
      <div class="sk-chase">
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
      </div>
      <text style="margin-left: 16rpx">加载中...</text>
    </cover-view>

    <cover-view
      v-show="preview"
      class="waiting-view"
      style="background-color: rgba(0, 0, 0, 1);z-index: 100;"
      @click="previewClick"
    >
      <img class="preview-image" v-lazy="poster" alt="" />
      <!-- :src="poster + '?x-oss-process=image/resize,w_700'" -->
    </cover-view>
  </view>
</template>

<script>
  export default {
    name: 'videoCom',
    props: {
      src: {
        type: String,
        require: true,
      },
      poster: {
        type: String,
        default: '',
      },
      videoId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        videoLoaded: false, // 视频元数据是否加载完成
        preview: true,
      };
    },
    computed: {
      loaded() {
        return this.videoLoaded;
      },
    },
    methods: {
      // 当开始/继续播放时触发play事件
      videoPlay(e) {
        this.videoPlayState = true;
        this.$emit('play', e);
      },
      // 视频元数据加载完成时触发。event.detail = {width, height, duration}
      loadedmetadata(e) {
        this.videoLoaded = true;
      },
      play() {
        const videoRef = this.$refs[`videoRef${this.videoId}`];
        videoRef.play();
      },
      pause() {
        const videoRef = this.$refs[`videoRef${this.videoId}`];
        videoRef.pause();
      },
      previewClick() {
        this.preview = false;
        this.$nextTick(() => {
          this.play();
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .video-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .dplayer-video {
    width: 100%;
    height: 100%;
  }

  .preview-image {
    width: 100%;
    height: 100%;
  }

  .waiting-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 30rpx;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }

  // loading
  .sk-chase {
    width: 30rpx;
    height: 30rpx;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
  }

  .sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: sk-chase-dot 2s infinite ease-in-out both;
  }

  .sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: #fff;
    border-radius: 100%;
    animation: sk-chase-dot-before 2s infinite ease-in-out both;
  }

  .sk-chase-dot:nth-child(1) {
    animation-delay: -1.1s;
  }
  .sk-chase-dot:nth-child(2) {
    animation-delay: -1s;
  }
  .sk-chase-dot:nth-child(3) {
    animation-delay: -0.9s;
  }
  .sk-chase-dot:nth-child(4) {
    animation-delay: -0.8s;
  }
  .sk-chase-dot:nth-child(5) {
    animation-delay: -0.7s;
  }
  .sk-chase-dot:nth-child(6) {
    animation-delay: -0.6s;
  }
  .sk-chase-dot:nth-child(1):before {
    animation-delay: -1.1s;
  }
  .sk-chase-dot:nth-child(2):before {
    animation-delay: -1s;
  }
  .sk-chase-dot:nth-child(3):before {
    animation-delay: -0.9s;
  }
  .sk-chase-dot:nth-child(4):before {
    animation-delay: -0.8s;
  }
  .sk-chase-dot:nth-child(5):before {
    animation-delay: -0.7s;
  }
  .sk-chase-dot:nth-child(6):before {
    animation-delay: -0.6s;
  }

  @keyframes sk-chase {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes sk-chase-dot {
    80%,
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes sk-chase-dot-before {
    50% {
      transform: scale(0.4);
    }
    100%,
    0% {
      transform: scale(1);
    }
  }
</style>
